<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item>
						<view class="banner">
							<image class="banner-tp" src="../../../static/Specialty_detail/cm1.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="banner">
							<image class="banner-tp" src="../../../static/Specialty_detail/cm2.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="banner">
							<image class="banner-tp" src="../../../static/Specialty_detail/cm3.jpg" mode=""></image>
						</view>
					</swiper-item>
			</swiper>
		</view>	
		<view class="price_mouble">
			<view class="price">
				<text class="money">¥55.00</text>
				<text class="price_wz">草莓</text>
			</view>
			<view class="share">
				<image class="share_pic" src="../../../static/Specialty_detail/fx.png" mode=""></image>
				<text class="share_wz">分享</text>
			</view>
		</view>
		<view class="commodity_detail">
			<view class="commodity_detail_title" v-for="(item,i) in distan">
				<text class="commodity_detail_wz">{{item.title}}</text>
				<text class="commodity_detail_wz">{{item.content}}</text>
			</view> 
		</view>
		<view class="judge_top">
			<text class="judge_wz">土货评价</text>
			<image class="judge_pic" src="../../../static/Specialty_detail/you.png" mode=""></image>
		</view>
		<view class="judge_bottom">
			<view class="judge_user">
				<image class="judge_user_tx" src="../../../static/Specialty_detail/girl.png" mode=""></image>
				<text class="judge_user_name">匿名评价</text>
			</view>
			<text class="judge_content">评价方未及时做出评价，相同默认好评</text>
		</view>
		<view class="judgu_zhanshi">
			<view class="judge_imgs" v-for="(item,i) in images">
				<image class="judgu_zhanshi_img" :src="item.imgurl" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,//是否显示面板指示点
				autoplay: true,//是否切换
				interval: 2000,//自动接环时间间隔
				duration: 500,//滑动动画时常
				distan:[{
					title:"产地",
					content:"云岩区煤矿村",
				},
				{
					title:"运费",
					content:"资讯商家",
				},
				{
					title:"规格",
					content:"一筐",
				}],
				images:[{
					imgurl:"../../../static/Specialty_detail/cm1.jpg"
				},
				{
					imgurl:"../../../static/Specialty_detail/cm2.jpg"
				}]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page {
	  background-color:#e1e4e1; 
	}
	.uni-marin-wrap{
	width: 100%;
	height: 450rpx;
	}
	.swiper{
		width: 100%;
		height: 450rpx;
		position: relative;
	}
	.banner-tp{
		width: 100%;
		height: 450rpx;
	}
	.price_mouble{
		width: 100%;
		height: 150rpx;
		display: flex;
		padding-top: 50rpx;
		justify-content: space-around;
		background-color: white;
	}
	.price{
		display: flex;
		flex-direction: column;
	}
	.money{
		font-size: 45rpx;
		color: red;
	}
	.price_wz{
		font-size: 50rpx;
	}
	.share{
		width:220rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		margin: 50rpx 0 0 150rpx;
		border-radius: 15rpx;
		background-color: #E1E4E1;
		
	}
	.share_pic{
		width: 50rpx;
		height: 50rpx;
	}
	.share_wz{
		font-size: 35rpx;
	}
	.commodity_detail{
		
	}
	.commodity_detail_title{
		font-size: 35rpx;
		display: flex;
		width: 100%;
		height: 100rpx;
		background-color: white;
	}
	.commodity_detail_wz{
		margin:50rpx 0 0 65rpx;
		line-height: 1rpx;
	}
	.judge_top{
		display: flex;
		height:60rpx ;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
		background-color: white;
	}
	.judge_wz{
		font-size:32rpx;
		margin-left: 50rpx;
	}
	.judge_pic{
		margin: 10rpx 40rpx 0 0; 
		width: 30rpx;
		height:30rpx;
	}
	.judge_bottom{
		background-color: white;
		margin-top: 10rpx;
	}
	.judge_user{
		display: flex;
	}
	.judge_user_name{
		color: #B7B6B6;
		margin:10rpx 0 0 50rpx;
	}
	.judge_user_tx{
		margin-left: 50rpx;
		width: 50rpx;
		height:50rpx;
	}
	.judge_content{
		margin-left: 50rpx;
	}
	.judgu_zhanshi{
	}
	.judgu_zhanshi_wz{
		margin-left:50rpx;
	}
	.judge_imgs{
		
	}
	.judgu_zhanshi_img{
		width: 100%;
		height: 500rpx;
		margin-top: 5rpx;
	}
</style>
